import React, {lazy, Suspense} from 'react'

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

const Home = lazy( () => import('./pages/Home') )
const CityList = lazy( () => import('./pages/CityList') )
const Map = lazy( () => import('./pages/Map') )
const Detail = lazy( () => import('./pages/HouseDetail') )
const Login = lazy( () => import('./pages/Login') )
const Registe = lazy( () => import('./pages/Registe') )
const Rent = lazy( () => import('./pages/Rent') )
const RentAdd = lazy( () => import('./pages/Rent/Add') )
const RentSearch = lazy( () => import('./pages/Rent/Search') )

const AuthRoute = lazy( () => import('./components/AuthRoute/index') )

function App() {
  return (
    <Router>
      <Suspense fallback={<div className="Route-loading">loading...</div>}>
        <div className="App">
          <Route exact path="/" render={()=><Redirect to="/home" />}/>
          <Route path="/home" component={Home} />
          <Route path="/citylist" component={CityList} />
          <Route path="/map" component={Map} />
          <Route path="/login" component={Login} />
          <Route path="/registe" component={Registe} />
          <Route path="/detail/:id" component={Detail} />

          <AuthRoute exact path="/rent" component={Rent} />
          <AuthRoute path="/rent/add" component={RentAdd} />
          <AuthRoute path="/rent/search" component={RentSearch} />
        </div>
      </Suspense>
    </Router>
  )
}

export default App
